<template>
  <div class="h-1/2">
    <CommonCard title="设备用户数量">
      <template #content>
        <div class="flex flex-wrap justify-between gap-2">
          <div class="textBgItem w-[48%]" v-for="(item, index) in deviceList" :key="index">
            <span class="text-[12px] text-[#d3d4d4]">{{ deviceObj[item.deviceType] }}</span>
            <div class="text-[16px] font-[Bebas]">{{ item.count }}</div>
          </div>
        </div>
      </template>
    </CommonCard>
  </div>
</template>
<script lang="ts" setup>
import { selectDeviceTypeGroup } from '@/api/home'
import CommonCard from '@/components/CommonCard.vue'
import { useCommonStore } from '@/stores/common'
import { deviceObj, timeNum } from '@/utils/commonFn'
import { onMounted, onUnmounted, ref, watch } from 'vue'
const timer = ref()
const deviceList = ref<{ deviceType: string; count: number }[]>([])
const formData = ref({
  institutionId: sessionStorage.getItem('institutionId')
})
const getInfo = async () => {
  const res: any = await selectDeviceTypeGroup(formData.value)
  deviceList.value = res.data
}
watch(
  () => useCommonStore().institutionId,
  (value) => {
    formData.value.institutionId = value
    getInfo()
  }
)
onMounted(() => {
  getInfo()
  timer.value = setInterval(() => {
    getInfo()
  }, timeNum)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="less"></style>
